<template>
    <div>
        <li>
            <div v-if='data.id>0' @click='changepid(data.id)' :class="pid == data.id?'active':''" :id='data.id'>{{data.name}}</div>
            <ul v-if='data.son && data.son.length>0'>
                <reply v-for='son in data.son' :data='son' :key='son.id'/>
            </ul>
        </li>
    </div>
</template>
<script>
import bus from './bus.js'
export default {
    name:'reply',
    props:['data'],
    data(){
        return{
            pid:0,
        }
    },
    methods: {
        changepid(pid){
            this.pid = pid
            localStorage.setItem('pid',pid)
            bus.$emit('pid',pid)
            //样式把active全删除，把当前的加上样式
            let activelist = document.getElementsByClassName('active')
            for(var i=0;i<activelist.length;i++){
                activelist[i].classList.remove('active')
            }
            //获取当前元素加上样式
            let pre = document.getElementById(pid)
            pre.classList.add('active')
        }
    },
}
</script>
<style lang="">
ul {
    padding-left:5rem;
}
.active{
    background-color: gold;
}
</style>